<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>GT pro钱包</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
		<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="stylesheet" href="css/card.css">
		<link rel="stylesheet" href="css/fr_style.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
		<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
		<style>
			.list.list5 li {
				min-width: 200px;
			}
			
			.fr_card_trendText {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			
			.fr_card_title {
				line-height: 25px;
			}
			#walletList,.tabBody{
				padding:10px 0;
			}
			#walletList li{
				display: inline-block;
				width:100px;
				line-height:35px;
				text-align:center;
				border:1px solid #ccc;
				background-color: #ccc;
				color:#fff;
				margin-right:10px;
				cursor:pointer;
			}
			#walletList li.active{
				background-color: #43CF7C;
				border:1px solid #43CF7C;
			}
			.tabBody .wallet_id{
				display: none;
			}
			.tabBody .wallet_id.active{
				display: block;
			}
			.tabBody .wallet_id table tr td,
			.tabBody .wallet_id table tr th{
				width:150px;
				height:40px;
				text-align: center;
				border:1px solid #aaa;
			}
			.tabBody .wallet_id table tr th{
				background-color: #ccc;
				font-weight:normal;
			}
			.tabBody .wallet_id table{
				border: 1px solid #ccc;
			}
		</style>
	</head>

	<body class="hold-transition skin-blue sidebar-mini">
		<div class="wrapper">

			<div class="content-wrapper">
				<section class="content-header ">
					<ol class="breadcrumb">
						<li>
							<a href="#"><i class="fa fa-dashboard"></i>数据中心</a>
						</li>
						<li class="active">数据分析</li>
					</ol>
				</section>
				<section class="content">
					<div class="row" id="sta">
						<div class="col-md-3 col-sm-4 col-xs-6">
							<div class="fr_card clearfix btn-info">
								<div class="fr_card_trendText" name="user_num">--</div>
								<div class="fr_card_title">平台用户总数</div>
							</div>
						</div>
						<!-- <div class="col-md-2 col-sm-3 col-xs-6">
							<div class="fr_card clearfix bg-olive">
								<div class="fr_card_trendText" name="user_game_num">--</div>
								<div class="fr_card_title">游戏用户总数</div>
							</div>
						</div> -->
						<div class="col-md-3 col-sm-4 col-xs-6">
							<div class="fr_card clearfix bg-orange">
								<div class="fr_card_trendText" name="profit_sum">--</div>
								<div class="fr_card_title">总利润</div>
							</div>
						</div>
						<!-- <div class="col-md-2 col-sm-3 col-xs-6">
							<div class="fr_card clearfix bg-navy">
								<div class="fr_card_trendText" name="game_num">--</div>
								<div class="fr_card_title">游戏数量</div>
							</div>
						</div> -->
						<div class="col-sm-3 col-sm-4 col-xs-6">
							<div class="fr_card clearfix bg-purple">
								<div class="fr_card_trendText" name="platform_coin_sum">--</div>
								<div class="fr_card_title">平台资产总数</div>
							</div>
						</div>
						<!-- <div class="col-md-2 col-sm-3 col-xs-6">
							<div class="fr_card clearfix bg-maroon">
								<div class="fr_card_trendText" name="game_recharge_sum">--</div>
								<div class="fr_card_title">游戏充值总数</div>
							</div>
						</div> -->
					</div>
					<div class="box" style="margin-top:10px;">
						<div class="box-header" style="border-bottom:1px solid #eee;">
							<h4 class="box-title" style="font-size:14px;">当前主链</h4>
						</div>
						<div class="box-body">
							<ul class="tab" id="walletList"></ul>
							<div class="tabBody">
								
							</div>
						</div>
						<!-- /.chat -->
						<div class="box-footer">

						</div>
					</div>
					<div class="box" style="margin-top:10px;">
						<div class="box-header" style="border-bottom:1px solid #eee;">
							<h4 class="box-title" style="font-size:14px;">数据分析</h4>
						</div>
						<div class="box-body chat">
							<!-- chat item -->
							<div class="box_content">
								<div id="transferChart" style="height:400px;width:100%;"></div>
								<div id="profitChart" style="height:400px;width:100%;"></div>
								<div id="registerChart" style="height:400px;width:100%;"></div>
							</div>

						</div>
						<!-- /.chat -->
						<div class="box-footer">

						</div>
					</div>
				</section>
			</div>
		</div>
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="dist/js/adminlte.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

		<script src="bower_components/moment/min/moment.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

		<script src="js/echarts.min.js"></script>

		<script src="js/argument.js"></script>
		<script src="js/fun.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/pop.js"></script>
		<script src="js/getList.js"></script>
		<script type="text/javascript">
		</script>
		<script type="text/javascript">
			$(".sidebar-menu").find("li[code = 1]").addClass("active")
			$("#walletList").on("click",'li',function(){
				console.log(1)
				if(!$(this).hasClass("active")){
					$(this).addClass("active").siblings("li").removeClass("active");
					var index = $(this).index();
					$(".tabBody").find(".wallet_id").eq(index).addClass('active').siblings().removeClass('active');
					//$(this).addClass("active").siblings("li").removeClass("active");
				}
			})
			
			function sortKey(array, key) {
		        return array.sort(function(a, b) {
		          	var x = a[key];
		          	var y = b[key];
		         	return x < y ? -1 : x > y ? 1 : 0;
		        });
		    }
			
			function renderOption(Json){
				var legendData=[],XData=[],seriesData=[];
				var arr=[];
				
				
				console.log(Json)
				$.each(Json.data,function(index,item){
					arr.push({time:index,value:item})
				})
				console.log(arr);
				var timeArr = sortKey(arr, "time");
				console.log(timeArr);
var option = {
					legend: {
						data: legendData,//['近七天对外转出', '近七天外部转入', '近七天总利润', '近七天用户注册数量'],
						top: 50,
						right: 10,
						width: 150,
						icon: 'roundRect',
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					color: ['#4293F7', '#B189DF', '#1DC2B6', '#FF8D1A'],
					xAxis: [

						{
							type: 'category',
							color: "#ccc",
							data: XData,//['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天']
						}
					],
					yAxis: {
						type: 'value'

					},
					series: [
//						{
//							name: '近七天对外转出',
//							type: 'line',
//							stack: '总量',
//							data: [120, 132, 101, 134, 90, 230, 210]
//						},
//						{
//							name: '近七天外部转入',
//							type: 'line',
//							stack: '总量',
//							data: [220, 182, 191, 234, 290, 330, 310]
//						},
//						{
//							name: '近七天总利润',
//							type: 'line',
//							stack: '总量',
//							data: [150, 232, 201, 154, 190, 330, 410]
//						},
//						{
//							name: '近七天用户注册数量',
//							type: 'line',
//							stack: '总量',
//							data: [320, 332, 301, 334, 390, 330, 320]
//						},

					]
				};
				
				return option;
			}

			function getStatistical() {
				$.ajax({
					type: "post",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					url: url + "Back_BackStatistics",
					contentType: "application/json",
					dataType: "json",
					success: function(res) {
						if(res.status == 1) {
							$.each(res.data,function(index,item){
								$("#sta [name = "+index+"]").text(Number(item));
							})
							count=0
							$.each(res.data.chain_info,function(index,item){
								var active = "";
								
								count==0?(active="active"):(null);
								$("#walletList").append('<li class='+ active +'>'+index+'</li>');
								var str ="<div class='wallet_id "+active+"'><table><theard><tr><th></th><th>冷地址</th><th>热地址</th></tr></theard><tbody>";	
								
								$.each(item.cold_info,function(key,items){
									str+="<tr><th>"+items.coin_name+"</th><td>"+items.coin_num+"≈"+items.balance_cny_sum+"(CNY)</td><td>"+item.hot_info[key].coin_num+"≈"+item.hot_info[key].balance_cny_sum+"(CNY)</td></tr>"
								})
								$(".tabBody").append(str+"</tbody></table></div>");
								count++;
							})
							
							
							//近七日用户注册
							var arr=[],TimeArr=[],registerDataArr=[];
							$.each(res.data.userSeven,function(index,item){
								arr.push({time:index,value:item})
							})
							var timeArr = sortKey(arr, "time");
							$.each(timeArr,function(index,item){
								TimeArr.push(item.time);
								registerDataArr.push(item.value)
							})
							var registerOption = {
								legend: {
									data: "用户注册数量",//['近七天对外转出', '近七天外部转入', '近七天总利润', '近七天用户注册数量'],
									top: 50,
									right: 10,
									width: 150,
									icon: 'roundRect',
								},
								tooltip : {
							        trigger: 'axis',
							        axisPointer: {
							            type: 'cross',
							            label: {
							                backgroundColor: '#6a7985'
							            }
							        }
							    },
								toolbox: {
									feature: {
										saveAsImage: {}
									}
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								color: ['#4293F7', '#B189DF', '#1DC2B6', '#FF8D1A'],
								xAxis: [
			
									{
										type: 'category',
										color: "#ccc",
										data: TimeArr,//['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天']
									}
								],
								yAxis: {
									type: 'value'
			
								},
								series: [

									{
										name: '近七天用户注册数量',
										type: 'line',
										stack: '总量',
										data: registerDataArr
									},

								]
							};
							
							
							//ProfitSeven TimeArr
							//近七日利润
							var profitDataArr=[];
							$.each(TimeArr,function(index,item){
								profitDataArr.push(res.data.ProfitSeven[item])
							})
							
							var profitOption = {
								legend: {
									data: "近七天利润",//['近七天对外转出', '近七天外部转入', '近七天总利润', '近七天用户注册数量'],
									top: 50,
									right: 10,
									width: 150,
									icon: 'roundRect',
								},
								tooltip : {
							        trigger: 'axis',
							        axisPointer: {
							            type: 'cross',
							            label: {
							                backgroundColor: '#6a7985'
							            }
							        }
							    },
								toolbox: {
									feature: {
										saveAsImage: {}
									}
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								color: ['#B189DF', '#1DC2B6', '#FF8D1A'],
								xAxis: [
			
									{
										type: 'category',
										color: "#ccc",
										data: TimeArr,//['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天']
									}
								],
								yAxis: {
									type: 'value'
			
								},
								series: [

									{
										name: '近七天利润',
										type: 'line',
										stack: '总量',
										data: profitDataArr
									},

								]
							};
							
							//   InSeven   ,
							//   TimeArr
							var inArr=[],transferOutArr=[],transferInArr=[];
							$.each(TimeArr,function(index,item){
								inArr.push(res.data.InSeven[item].cny_sum)
								transferOutArr.push(res.data.transferOutSeven[item].cny_sum)
								transferInArr.push(res.data.transferInSeven[item].cny_sum)
							})
							console.log(transferInArr)
							console.log(transferOutArr)
							console.log(inArr)
							var transferOption = {
								legend: {
									data: ['近七天内部交易', '近七天对外转出', '近七天外部转入'],
									top: 50,
									right: 10,
									width: 150,
									icon: 'roundRect',
								},
								tooltip : {
							        trigger: 'axis',
							        axisPointer: {
							            type: 'cross',
							            label: {
							                backgroundColor: '#6a7985'
							            }
							        }
							    },
								toolbox: {
									feature: {
										saveAsImage: {}
									}
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								color: ['#B189DF', '#1DC2B6', '#FF8D1A'],
								xAxis: [
			
									{
										type: 'category',
										color: "#ccc",
										data: TimeArr,//['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天']
									}
								],
								yAxis: {
									type: 'value'
			
								},
								series: [

									{
										name: '近七天内部交易',
										type: 'line',
										data: inArr
									},
									{
										name: '近七天对外转出',
										type: 'line',
										data: transferOutArr
									},
									{
										name: '近七天外部转入',
										type: 'line',
										data: transferInArr
									},
									
								]
							};
							
							
							var transferChart = echarts.init(document.getElementById("transferChart"));
							transferChart.setOption(transferOption);
							
							var profitChart = echarts.init(document.getElementById("profitChart"));
							profitChart.setOption(profitOption);
							
							
							
							var registerChart = echarts.init(document.getElementById("registerChart"));
							registerChart.setOption(registerOption);
						} else if(res.status == 1000||res.status == 102) {
							ToLogin(res);
						} else {
							alert(res.error);
							return false;
						}

					}
				})

			}
			getStatistical();
		</script>
	</body>

</html>